<template>
  <div class="app-container">
    <div class="filter-container">
      {{ $t('关键字') }}：
      <el-input size="small" clearable filterable style="width: 200px;" v-model="searchKey.desc"
                :placeholder="$t('请输入任意关键字')"></el-input>
      <el-button size="mini" icon="el-icon-search" @click="getJobLogs" type="primary">{{ $t('搜索') }}</el-button>
      <el-tooltip class="item" effect="dark" :content="$t('刷新表单')" placement="top">
        <el-button @click="getJobLogs" size="mini"  icon="el-icon-refresh" circle></el-button>
      </el-tooltip>
    </div>
    <el-scrollbar style="height: 800px;">
    <el-table
      style="width: 100%; white-space: nowrap;"
      border stripe
      :header-cell-style="{background:'#eef1f6',color:'#606266',top:'5px'}"
      ref="multipleTable"
      :data="scheduledJobLogList"
      tooltip-effect="dark"

      v-loading="listLoading">
      <el-table-column align="center" label="日志编号" width="120">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="className" label="任务调用目标类名称" width="200" show-overflow-tooltip>
      </el-table-column>

      <el-table-column align="center" prop="cron"  width="150" ailgn="center" label="cron执行表达式" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="执行时间" width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"></i> {{ scope.row.addTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="group" label="分组" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="desc" label="任务描述" width="250" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="taskName" label="任务名称" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="nextFireTime" label="任务下一次执行时间" width="220" show-overflow-tooltip>
        <template slot-scope="scope">
          <i class="el-icon-time"></i> {{ scope.row.nextFireTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="jobName" label="任务号" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="jobGroup" label="任务分组" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="fireInstanceId" label="消防实例id" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="parameter" label="参数" width="150" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    </el-scrollbar>
    <pagination v-show="total>10" :total="total" :page.sync="searchKey.page" :limit.sync="searchKey.limit"
                @pagination="getJobLogs"/>
  </div>
</template>

<script>
import {scheduleJobLogs} from "@/api/scheduled";
import Pagination from '@/components/Pagination'
import { getToken } from '@/utils/auth'
export default {
  name: "scheduledLog",
  components: {Pagination},
  data(){
    return{
      searchKey: {
        desc: undefined,
        page: 1,
        limit: 20,
      },
      scheduledJobLogList: [],
      total: 0,
      listLoading: false,
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.getJobLogs()
  },
  methods: {
    getJobLogs(){
      this.listLoading = true
      scheduleJobLogs(this.searchKey).then(res=>{
        this.listLoading = false
        this.scheduledJobLogList = res.data.data.list
        this.total = res.data.data.total
        console.log(JSON.stringify(res))
      }).catch(() => {
        this.scheduledJobLogList = []
        this.total = 0
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
